<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom )+'px'}">
		<navbar :title="cataName" :isFixed="false" transparent></navbar>
		<view class="content" :style="{paddingTop:(0 ) + 'px'}">
			<rich-text :nodes="detail.cnt" @click="catchImage"></rich-text>
		</view>
		<view class="main-bj">
			
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import { mapGetters } from 'vuex'
	import {getCataOne} from "@/core/web-api/common.js"
	export default{
		components:{
			Navbar
		},
		data(){
			return{
				detail:{},
				cataName:"",
				imgarr:[]
			}
		},
		methods:{
			catchImage(e) {
				this.showImg(this.imgarr)
			},
						
			showImg(urls) {
				console.log(urls)
				// var current = e.target.dataset.src
				let that = this
				uni.previewImage({
					// showmenu:true,
					current: 0,
					urls: urls,
					longPressActions :{
						itemList:['保存图片'],
						success(data) {
							let imgurl = url
							that.saveImage(imgurl)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					
				})
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
								})
							}
						})
					}
				})
			},
			
			
			
			/**
			 * 获取详情
			 */
			getDetail(){
				getCataOne({
					cataName:this.cataName
				}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail;
						this.detail.cnt = this.detail.cnt? this.detail.cnt.replace(/<img/g,`<img style='max-width:100%'`):""
						
						this.imgarr = [];
						let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
						let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
						let arrsImg = this.detail.cnt.match(regex); // 后台返回的富文本数据
						for (let a = 0; a < arrsImg.length; a++) {
						    let srcs = arrsImg[a].match(srcReg);
						    this.imgarr.push(srcs[1])
						}
						
					}
				})
			},
		},
		computed:{
			...mapGetters(['getStateHeight','getNavbar','getSafeBottom'])
		},
		onLoad(options) {
			this.cataName = options.cataName;
			this.getDetail();
		}
	}
</script>
<style>
	page{
		background-color: #fff!important;
	}
</style>
<style scoped lang="less">
	.main {
		width: 100%;
	
	// 	&-bj {
	// 		width: 100%;
	// 		height: 50vh;
	// 		position: fixed;
	// 		left: 0;
	// 		top: 0;
	// 		z-index: -1;
	// 		background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
	// 	}
	
	}
	
	.content {
		width: 100%;
		margin-top: 30upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	
</style>